<template>
    <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import OSM from 'ol/source/OSM'
import TileLayer from 'ol/layer/Tile'
// import TileWMS from 'ol/source/TileWMS'
import TileJSON from 'ol/source/TileJSON'
import View from 'ol/View'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const layers = [
        // new TileLayer({
        //   source: new OSM()
        // }),
        new TileLayer({
          // extent: [-13884991, 2870341, -7455066, 6338219],
          // source: new TileWMS({
          //   url: 'https://ahocevar.com/geoserver/wms',
          //   params: {'LAYERS': 'topp:states', 'TILED': true},
          //   serverType: 'geoserver',
          //   // Countries have transparency, so do not fade tiles:
          //   transition: 0
          // })
          source: new TileJSON({
            url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
            crossOrigin: 'anonymous'
          })
        })
      ]
      // eslint-disable-next-line
      const map = new Map({
        layers: layers,
        target: 'map',
        view: new View({
          // center: [-10997148, 4569099],
          center: [0, 0],
          zoom: 4
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
